<template>
  <div>
    <el-card shadow="hover">
      <el-form ref="formRef" :model="state.emailTempForm" :rules="rules" size="default" label-width="300px">
        <el-form-item label="邮箱地址" prop="email">
          <el-input v-model="state.emailTempForm.email" placeholder="请输入邮箱地址" style="width: 30%" />
        </el-form-item>
        <el-form-item label="用户名称" prop="name">
          <el-input v-model="state.emailTempForm.name" placeholder="请输入用户名称" style="width: 30%" />
        </el-form-item>

        <el-form-item label="公司名称" prop="companyName">
          <el-input v-model="state.emailTempForm.companyName" placeholder="请输入公司名称" style="width: 30%" />
        </el-form-item>
        <el-form-item label="公司备注" prop="companyInfo">
          <el-input v-model="state.emailTempForm.companyInfo" placeholder="请输入公司备注" style="width: 30%" />
        </el-form-item>

        <span class="dialog-footer">
          <el-button size="default" @click="goback">返 回</el-button>
          <el-button type="primary" size="default" @click="onSubmit">{{emailTempForm.id!==0?'修 改':'添 加'}}</el-button>
        </span>
      </el-form>
    </el-card>
  </div>
</template>



<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router';
import { onMounted, reactive, toRefs, ref, unref } from 'vue';
import { ElMessage, ElForm } from 'element-plus';
import { addEmailTmpList, editEmailTmpList, getEmailTmp } from '/@/api/system/mailtmp';
import { getEmailCompany, addEmailCompanyList, editEmailCompanyList } from '/@/api/system/mailtmpCompany';
//富文本

//import wangeditor from 'wangeditor';

const route = useRoute();
const router = useRouter();

interface ArticleFormState {
	id: number;
	title: string;
	titleUrl: string;
	display: string;
	content: string;
}

interface ArticleState {
	emailTempForm: ArticleFormState;
	rules: {};
}

const formRef = ref(ElForm);

// end

const state = reactive({
	emailTempForm: {
		id: 0,
		name: '',
		email: '',
		companyInfo: '',
		companyName: '',
	},
	instance: null,
	id: 'wangeditorMail',
	editor: null as any,
	rules: {
		email: [{ required: true, message: 'email不能为空', trigger: 'blur' }],
	},
});

const { emailTempForm, rules } = toRefs(state);

function headler() {
	const id = route.query.id as string;

	console.log('article id=', id);

	if (id) {
		state.emailTempForm.id = Number(id);
		getEmailCompany(state.emailTempForm).then((rep) => {
			state.emailTempForm.content = rep.data.data.content;
			state.emailTempForm.title = rep.data.data.title;
			state.emailTempForm.thumbnail = rep.data.data.thumbnail;
			state.emailTempForm.setPath = rep.data.data.setPath;
		});
	}
}

function goback() {
	router.go(-1);
}

// 新增/编辑
function onSubmit() {
	const formWrap = unref(formRef) as any;
	if (!formWrap) return;

	console.log(state.emailTempForm);
	formWrap.validate((valid: boolean) => {
		if (valid) {
			if (state.emailTempForm.id !== 0) {
				//修改
				editEmailCompanyList(state.emailTempForm).then(() => {
					ElMessage.success('修改成功');
					//emit('dataList')
					router.push({ path: '/system/mailtmp/companyList' });
				});
			} else {
				//添加
				let data = {
					email: state.emailTempForm.email,
					name: state.emailTempForm.name,
					companyName: state.emailTempForm.companyName,
					companyInfo: state.emailTempForm.companyInfo,
				};
				addEmailCompanyList(data).then(() => {
					ElMessage.success('添加成功');
					router.push({ path: '/system/mailtmp/companyList' });
					//emit('dataList')
				});
			}
		}
	});
}

onMounted(() => {
	headler();
});
</script>

